<template>
	<view class="my-global-market">
		<view class="padding text-center">
			<view class="padding-xl radius shadow-blur bg-red margin-top bg-img" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91005.jpg);">
				<view>个人全球市场查询</view>
			</view>
		</view>
		<view class="desc-info">
			<view class="count">
				共有{{items.length}}个物品
			</view>
		</view>
		<GlobalMarketShow v-for="v in items" :key="v.id"
			:playerName="v.ownerName" :itemName="v.itemName"
			:startTime="new Date(v.startTime).toLocaleDateString()" :price="v.price + ''"
			:endTime="new Date(v.endTime).toLocaleDateString()" :isOutdate="v.endTime > new Date().getDate()"
			:bgColorClass="getRandomBgColorClass()"
		/>
	</view>
</template>

<script>
	import GlobalMarketShow from '../../../component/GlobalMarketShow.vue'
	import common from '../../../common/index.js'
	import ajax from '../../../Ajax/index.js'
	export default {
		components: {
			GlobalMarketShow
		},
		data() {
			return {
				items: [],
				bgColorClassArr: [
					'bg-gradual-purple',
					'bg-gradual-pink',
					'bg-gradual-blue',
					'bg-gradual-green',
					'bg-gradual-orange',
					'bg-gradual-red'
				]
			};
		},
		mounted() {
			this.getMyGlobalMarketRecord()
		},
		methods: {
			getMyGlobalMarketRecord() {
				let playerName = common.getCookie('playerName')
				if (!!!playerName) {
					uni.showToast({title: '玩家名获取失败', icon: 'none'})
					return
				}
				let param = new URLSearchParams()
				param.append("playerName", playerName)
				ajax.post('/globalMarket/getPlayerGlobalMarketRecord', param).then(res => {
					if (res.data.code === 200) {
						uni.showToast({title: res.data.msg, icon: 'none'})
						this.items = res.data.list
					} else {
						uni.showToast({title: res.data.msg, icon: 'none'})
					}
				})
			},
			getRandomBgColorClass() {
				let random = parseInt(Math.random() * 6, 10) + 1;
				return this.bgColorClassArr[random - 1]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-global-market {
		padding: 0 20rpx;
		.desc-info {
			padding: 20rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;
			.count {
				
			}
		}
	}
</style>
